import React from "react";
import propsTypes from 'prop-types'
import styles from './uc-skeleton.module.css'

export default class UcSkeleton extends React.Component {
    static defaultProps = {
        avatar: false,
        paragraph: {
            rows: 3,
            width: '100%'
        },
        loading: false
    };

    static propsTypes = {
        avatar: propsTypes.bool,
        paragraph: propsTypes.shape({
            rows: propsTypes.number,
            width: propsTypes.oneOfType([propsTypes.number, propsTypes.string, propsTypes.arrayOf(propsTypes.oneOfType([propsTypes.number, propsTypes.string]))])
        }),
        loading: propsTypes.bool
    }

    // 处理宽度的函数
    parseWidth = val => {
        let result = null;
        if (typeof val === 'string') {
            result = val;
        } else if (typeof val === 'number') {
            result = val + 'px'
        }
        return result
    }

    render() {
        let { loading, avatar, paragraph, children } = this.props
        let skl = (
            <div className={styles.skl}>
                {
                    avatar && <div className={styles.avatar}></div>
                }
                {
                    new Array(paragraph.rows).fill(0).map((item, index) => (
                        <div className={styles.row}
                            key={index}
                            style={{ width: this.parseWidth(paragraph.width) }}
                        >
                        </div>
                    ))
                }
            </div>
        )
        return loading ? skl : children
    }
}